<template>
    <div class="app-container">
        <el-col :span="18" :offset="3" :xs="24">
           <el-card class="Go_out_edit" v-if="editFlag">
              <div slot="header" class="clearfix">
                  <span>外出申请</span>
              </div>
              <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                            <el-col :span="12" >
                                <el-form-item label="申请日期" prop="applyDate">
                                    <span>{{form.applyDate}}</span>
                                </el-form-item>
                            </el-col>
                        <el-col :span="12" >
                            <el-form-item label="员工ID" prop="partyId">
                                 <span>{{form.partyId}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                            <el-col :span="20" >
                                <el-form-item label="外出事由" prop="reason">
                                    <el-input v-model="form.reason" type="textarea" placeholder="请输入内容" />
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row>                        
                            <el-col :span="12" >
                                <el-form-item label="开始时间" prop="goOutFrom">
                                    <el-date-picker clearable
                                       v-model="form.goOutFrom"
                                       type="datetime"
                                       value-format="yyyy-MM-dd HH:mm:ss"
                                       default-time = "00:00:00"
                                       placeholder="请选择开始时间">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12" >
                                <el-form-item label="结束时间" prop="goOutTo">
                                    <el-date-picker clearable
                                       v-model="form.goOutTo"
                                       type="datetime"
                                       value-format="yyyy-MM-dd HH:mm:ss"
                                       default-time = "00:00:00"
                                       placeholder="请选择结束时间">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row>                        
                        <el-col :span="12" >
                            <el-form-item label="外出时长" prop="goOutHour">
                                <el-input v-model="form.goOutHour" placeholder="请输入外出时长" />
                            </el-form-item>
                        </el-col>

                            <el-col :span="12" >
                                <el-form-item label="状态" prop="statusId">
                                    <el-select v-model="form.statusId" placeholder="请选择状态">
                                        <el-option
                                           v-for="dict in statusIdOptions"
                                           :key="dict.enumCode"
                                           :label="dict.description"
                                           :value="dict.enumCode"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row>                            
                        <el-col :span="20" >
                            <el-form-item label="附件">
                                <file-upload v-model="form.affixFilePath"/>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                            <el-col :span="12" >
                                <el-form-item label="审批人" prop="approver">
                                    <LoadPersonSelect
                                        :placeholder="'请选择申请人'"
                                        @getSelectedCourt="getSelectedApprover"
                                    ></LoadPersonSelect>
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="24">
                            <el-form-item size="large" align="center">
                                <el-button type="primary" @click="saveForm">保 存</el-button>
                                <el-button type="primary" @click="submitForm">提 交</el-button>
                                <el-button type="danger"  @click="close">关闭</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-card class="Go_out_detail" v-if="detailFlag">
                <div slot="header" class="clearfix">
                    <span>外出申请</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="edit">编辑</el-button>
                </div>
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="申请日期" prop="applyDate">
                                <span>{{ form.applyDate }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="员工ID" prop="partyId">
                                <span>{{ form.partyId }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="外出事由" prop="reason">
                                <span>{{ form.reason }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="开始时间" prop="goOutFrom">
                                <span>{{ form.goOutFrom }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="结束时间" prop="goOutTo">
                                <span>{{ form.goOutTo }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="外出时长" prop="goOutHour">
                                <span>{{ form.goOutHour }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="状态" prop="statusId">
                                <span>{{ form.statusId }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="附件" prop="affixFilePath">
                                <span>{{ form.affixFilePath }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="审批人" prop="approver">
                                <span>{{ form.approver }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="24" v-if="applyFlag">
                            <el-form-item size="large" align="center">
                                <el-button type="primary" @click="saveForm">保 存</el-button>
                                <el-button type="primary" @click="submitForm">提 交</el-button>
                                <el-button type="danger"  @click="close">关闭</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
            <!-- 审批组件 -->
            <approve v-if="approveFlag"></approve>
        </el-col>
    </div>
</template>

<script>
import LoadPersonSelect from "@/components/LoadPersonSelect";
import { addGo_out, updateGo_out, approvalGo_out } from "@/api/ehr/go_out";
import { getBusinessLog } from "@/api/busi/log";
import { getProcessVariables } from "@/api/workflow/definition";
// 审批组件
import Approve from "@/components/Approve";

export default {
    components: {LoadPersonSelect,Approve},
    name: "Go_out_apply",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 审批人时间范围
            daterangeApplyDate: [],
            // 状态业务字典
            statusIdOptions: [],
            // 流程状态业务字典
            flowStatusOptions: [],
            // 审批人业务字典
            approverOptions: [],
            // 操作标识,用于区分是新增还是修改
            updateFlag: false,
            // 操作标识,用于区分是详情
            detailFlag: false,
            // 操作标识,用于区分编辑状态
            editFlag: true,
            // 业务申请标识
            applyFlag: true,
            // 业务审批标识
            approveFlag: false,

            // 表单参数
            form: {},
            // 表单校验
            rules: {
                applyDate: [
                    { required: true, message: "申请日期不能为空", trigger: "blur" }
                ],

                partyId: [
                    { required: true, message: "员工ID不能为空", trigger: "blur" }
                ],

                goOutFrom: [
                    { required: true, message: "开始时间不能为空", trigger: "blur" }
                ],

                goOutTo: [
                    { required: true, message: "结束时间不能为空", trigger: "blur" }
                ],

                goOutHour: [
                    { required: true, message: "外出时长不能为空", trigger: "blur" }
                ],

                approver: [
                    { required: true, message: "审批人不能为空", trigger: "change" }
                ],

            }
        };
    },
    created() {
        this.reset();
        // 为申请时间默认赋值
        this.form.applyDate = this.parseTime(
            new Date(),
            "{y}-{m}-{d} {h}:{i}:{s}"
        );
        // 为申请人默认值
        this.form.partyId = this.$store.state.user.partyId;
         // 状态业务字典
        this.getEnumDicts("FLOW_STATUS").then((response) => {
            this.statusIdOptions = response.data;
        });
         // 审批人业务字典
        this.getEnumDicts("APPROVAL_RESULT").then((response) => {
            this.approverOptions = response.data;
        });
        var procInsId = this.$route.query && this.$route.query.procInsId;
        if (procInsId) {
            this.editFlag = false;
            this.detailFlag = true;
            // 业务申请标识
            this.applyFlag = false;
            // 审批标识
            this.approveFlag = true;
        };
        var taskId = this.$route.query && this.$route.query.taskId;
        // 获取表单参数
        this.getApproveFormParams(taskId, procInsId);
    },
    computed: {
        userInfo() {
            return this.$store.state.user; //当前登录用户信息
        },
    },
    methods: {
        // 获取审批表单变量
        getApproveFormParams(taskId, procInsId) {
            // 1.优先从工作流的参数中获取表单信息,流程任务重获取变量表单
            if (taskId) {
                getProcessVariables(taskId).then((res) => {
                    this.form = res.data.businessMap;
            });
            } else {
                // 2.从业务流水表获取工作流表单参数
                getBusinessLog(procInsId).then((response) => {
                    if(response.data){
                        this.form = JSON.parse(response.data.busiContentJson);
                    } 
                });
            }
        },

        // 审批人选择赋值
        getSelectedApprover(e) {
            this.form.approver = e;
        },
        statusIdFormat(row, column) {
            let val = null;
            this.statusIdOptions.forEach((item, index) => {
                if (row.statusId === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },
        approverFormat(row, column) {
            let val = null;
            this.approverOptions.forEach((item, index) => {
                if (row.approver === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                goOutId: null,
                applyDate: null,
                partyId: null,
                reason: null,
                goOutFrom: null,
                goOutTo: null,
                goOutHour: null,
                statusId: null,
                affixFilePath: null,
                flowInstId: null,
                flowStatus: "0",
                approver: null,
                lastUpdatedStamp: null,
                lastUpdatedTxStamp: null,
                createdStamp: null,
                createdTxStamp: null
            };
            //this.resetForm("form");
        },

        /** 保存按钮 */
        saveForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true;
                    if (this.form.goOutId != null && this.updateFlag) {
                        updateGo_out(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                        });
                    } else {
                        addGo_out(this.form).then(response => {
                            this.form.goOutId = response.data.goOutId;
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                        });
                    }
                    this.loading = false;

                    this.editFlag = false;
                    this.detailFlag = true;
                }
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true;

                    approvalGo_out(this.form).then((response) => {
                        this.$modal.msgSuccess("提交申请成功");
                        this.open = false;
                    });
                    this.loading = false;

                    this.close();
                }
            });
        },

        /** 编辑 */
        edit(){
            this.editFlag = true;
            this.detailFlag = false;
        },
        resetForm() {
            this.$refs['form'].resetFields()
        },
        close() {
            this.$tab.closePage();
        },

    }
};
</script>
